<div class="container-fluid data-summary-tab" ng-controller="DataSummaryController">

  <div class="row"
       ng-repeat="dataRuleDefn in dataRuleDefinitions = (allDataRuleDefinitions | filter: {lane: selectedObject.outputLane, enabled: true})">

    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>{{dataRuleDefn.label}}</span>
          <span>(Condition - {{dataRuleDefn.condition}} )</span>
        </div>
        <div class="panel-body rule-panel-body">


          <!-- Triggered Alert -->
          <div class="col-md-12 col-lg-12 triggered-alerts"
               ng-repeat="triggeredAlert in laneAlerts  = (triggeredAlerts | filter : {ruleDefinition: {id : dataRuleDefn.id}})">
            <div class="alert alert-danger clearfix" role="alert">
              <i class="fa fa-exclamation-triangle"></i>

              <span ng-if="triggeredAlert.gauge.value.exceptionMessage"
                     ng-bind="triggeredAlert.gauge.value.exceptionMessage"></span>

              <span ng-if="!triggeredAlert.gauge.value.exceptionMessage && triggeredAlert.ruleDefinition.thresholdType"
                    ng-bind="triggeredAlert.ruleDefinition.alertText"></span>

              <span ng-if="!triggeredAlert.gauge.value.exceptionMessage && !triggeredAlert.ruleDefinition.thresholdType && triggeredAlert.gauge.value.alertTexts"
                    class="alert-text" ng-repeat="alertText in triggeredAlert.gauge.value.alertTexts track by $index">{{alertText}}</span>

              <span ng-if="!triggeredAlert.gauge.value.exceptionMessage && !alert.gauge.value.alertTexts"
                class="alert-details"> ( {{'home.detailPane.summaryTab.currentValue' | translate}}: {{triggeredAlert.gauge.value.currentValue}}, {{'home.detailPane.summaryTab.triggered' | translate}}: {{triggeredAlert.gauge.value.timestamp | amTimeAgo}} )</span>

              <div class="pull-right">
                <a href="#"
                   ng-click="deleteTriggeredAlert(triggeredAlert)">
                  <span translate="global.form.delete">Delete</span>
                </a>
                &nbsp;|&nbsp;
                <a href="#"
                   ng-click="selectRulesTab(triggeredAlert)">
                  <span translate="global.form.changeRule">Change Rule</span>
                </a>
              </div>

            </div>
          </div>


          <!-- Sampling Records -->
          <div class="col-md-6 col-lg-6" ng-controller="DataSummarySamplingController">
            <table class="table fixed-layout">
              <thead>
              <tr>
                <th class="col-md-4">
                  <div class="pull-left">
                    <span>
                      <span translate="global.form.sampleRecords">Sample Records</span>
                      (<a href="#" ng-click="downloadSamplingRecords($event)">{{samplingRecordsSizeInBytes | friendlyFileSize}}</a>)
                    </span>
                    <i class="fa fa-refresh pointer icon-button"
                       ng-click="refreshSamplingRecords()"
                       tooltip-placement="right"
                       tooltip="{{'global.form.refresh' | translate}}"></i>
                  </div>

                  <div class="pull-right btn-group toggle-toolbar">
                    <label class="btn btn-default btn-sm" ng-model="sampledRecordsType"
                           tooltip-placement="bottom"
                           tooltip-append-to-body="true"
                           tooltip="{{'home.detailPane.dataSummaryTab.allSampledRecordsTooltip' | translate}}"
                           btn-radio="'all'">{{'home.detailPane.dataSummaryTab.allSampledRecords' | translate}}</label>
                    <label class="btn btn-default btn-sm" ng-model="sampledRecordsType"
                           tooltip-placement="bottom"
                           tooltip-append-to-body="true"
                           tooltip="{{'home.detailPane.dataSummaryTab.matchedSampledRecordsTooltip' | translate}}"
                           btn-radio="'matched'">{{'home.detailPane.dataSummaryTab.matchedSampledRecords' | translate}}</label>
                    <label class="btn btn-default btn-sm" ng-model="sampledRecordsType"
                           tooltip-placement="bottom"
                           tooltip-append-to-body="true"
                           tooltip="{{'home.detailPane.dataSummaryTab.notMatchedSampledRecordsTooltip' | translate}}"
                           btn-radio="'notMatched'">{{'home.detailPane.dataSummaryTab.notMatchedSampledRecords' | translate}}</label>
                  </div>

                </th>
              </tr>
              </thead>
              <tbody ng-hide="showBadRecordsLoading">
              <tr ng-repeat="sampledRecord in filteredSampledRecords = (samplingRecords | filter: filterSampledRecords)">
                <td>
                  <record-tree
                    record="sampledRecord.record"
                    record-value="sampledRecord.record.value"
                    field-name="getRecordHeader(sampledRecord, $index)"
                    is-root="true"
                    editable="false">
                  </record-tree>
                </td>
              </tr>

              <tr ng-if="filteredSampledRecords.length === 0">
                <td class="no-records text-center"
                    translate="home.previewPane.noRecords">No Records to view.</td>
              </tr>

              </tbody>

            </table>
            <div show-loading="showRecordsLoading"></div>
          </div>


          <!-- Meter -->
          <div class="col-md-6 col-lg-6"
               ng-if="dataRuleDefn.meterEnabled"
               ng-controller="DataSummaryMeterController">

            <ul class="properties">
              <li>
                <span class="properties-label">Count:</span>
                <span class="properties-value">{{count}}</span>
              </li>
            </ul>

            <nvd3 options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>
          </div>

        </div>

      </div>
    </div>

  </div>

  <div class="row" ng-if="dataRuleDefinitions.length === 0">
    <div class="col-md-12" >
      <div class="alert alert-info" role="alert">
        <i class="fa fa-info-circle"></i>
        <span>{{'home.detailPane.dataSummaryTab.noRulesMessage' | translate}}</span>
      </div>
    </div>
  </div>

</div>